CSS Transform

因為下一篇會介紹 CSS Transform 的方式使元素置中，因此這一篇會先簡單介紹 Transform。

CSS transform 可以 move (移動)，rotate (旋轉)，scale (放大)，和 skew (傾斜) 一個元素。

2D Transform 主要有以下屬性：

• translate()
• rotate()
• scaleX()
• scaleY()
• scale()
• skewX()
• skewY()
• skew()
• matrix()

translate()

translate() 會根據原本的位置進行x，y 軸的移動。

第一個參數為將元素沿著 x 軸移動多少距離，第二個參數為將元素沿著 y 軸移動多少距離。

CodePen 範例

rotate()

rotate()會沿著方向進行旋轉，單位是度。rotate(20deg)表示將 div 依順時鐘的方向轉 20 度。rotate(-20deg)表示將 div 依逆時鐘的方向轉 20 度

CodePen 範例

scaleX()

scaleX() 可以將元素的 width 放大或縮小。

scaleX(2)表示將元素放大 2 倍的寬度。

scaleX(0.5)表示將元素縮小成原本的二分之一寬度。

scaleX(-0.5)表示將元素縮小成原本的二分之一寬度，並且呈現左右相反的對稱圖

CodePen 範例

scaleY()

scaleY() 可以將元素的 height 放大或縮小。

scaleY(2)表示將元素放大 2 倍的高度。

scaleY(0.5)表示將元素縮小成原本的二分之一高度。

scaleY(-0.5)表示將元素縮小成原本的二分之一高度，並且呈現上下相反的對稱圖。

CodePen 範例

scale()

scale() = scaleX() + scaleY()。

scale(2, 3)表示將元素放大 2 倍的寬度，放大 3 倍高度。

CodePen 範例

skewX()

skew 的中文叫做偏度。skewX() 表示朝著 x 軸傾斜多少度。

skewX(20deg)表示將元素朝著 X 軸傾斜 20 度。

CodePen 範例

skewY()

skew 的中文叫做偏度。skewY() 表示朝著 y 軸偏多少度。

skewX(20deg)表示將元素朝著 y 軸 傾斜 20 度。

CodePen 範例

skew()

skew() = skewX() + skewY()

skew(20deg, 30deg)表示將元素朝著 x 軸 傾斜 20 度，朝著 y 軸傾斜 30 度。

CodePen 範例

matrix()

matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

matric() 總共有 6 個參數， 這6 個參數上述皆有介紹過，把對應的值帶入即可使用 matrix()。

參考資料：
CSS 2D Transforms